<template>
  <div :class="['swipe-play']">
    <Swipe v-model="currentIndex" :class-name="className" :host="host" :list="list" v-bind="$attrs" v-on="$listeners" @click.native.stop="clickHandle" />
  </div>
</template>
<script>
import Swipe from '@/components/Swipe'
import { ImagePreview } from 'vant'
export default {
  name: 'SwipePlay',
  components: {
    Swipe
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    value: {
      type: Number,
      default: 0
    },
    className: {
      type: String,
      default: ''
    },
    host: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  computed: {
    hasVideo() {
      return this.list.some(e => e.type === 'video')
    }
  },
  watch: {
    value: {
      handler(v) {
        this.currentIndex = v
      },
      immediate: true
    },
    currentIndex(v) {
      this.$emit('input', v)
    }
  },
  methods: {
    clickHandle() {
      const images = this.list.filter(e => e.type === 'image').map(e => /^http.+/.test(e.src) ? e.src : `${this.host || process.env.VUE_APP_GCENTER_STATIC}/${e.src}`)
      if (images.length <= 0) return
      const list = {
        images,
        startPosition: this.hasVideo ? this.currentIndex - 1 : this.currentIndex
      }
      ImagePreview(list)
    }
  }
}
</script>
<style lang="less" scoped>
.swipe-play{
}
</style>
